import React, { useState, useEffect, useRef } from "react";
import { Form, Select, Input, Button } from "antd";
import api from "../../api";
const { Option } = Select;

const ThreeLevelinkage = (props) => {
    const [options, setOptions] = useState([]), //省
        [cityOption, setCityOption] = useState([]), //市
        [county, setCounty] = useState([]); //县

    const refAll = useRef(),
        searchRef = useRef();

    useEffect(() => {
        getAddressFun();
        console.log(props);
    }, []);

    // 获取全国地址的省
    const getAddressFun = async () => {
        const { data: res } = await api.getAddress();
        setOptions([...res.data.province_list]);
        // console.log(res.data.province_list);
    };
    // 获取全国地区的市
    const selectCity = async (value) => {
        const { data: res } = await api.cityAddress({
            province_code: value,
        });
        setCityOption([...res.data.province.next]);
        // console.log(res.data.province.next);
    };
    // 获取全国地区的县
    const selectCounty = async (value) => {
        const { data: res } = await api.countyAddress({
            city_code: value,
        });
        setCounty([...res.data.city.next]);
        // console.log(res.data.city.next);
    };
    const searchFun = async () => {
        //使用Promise处理数据
        // 销售楼盘
        if (props.result) {
            new Promise((resolve, reject) => {
                const res = api.cityAddress({
                    province_code: refAll.current.getFieldValue().LeaveCity,
                    city_code: refAll.current.getFieldValue().CityDown,
                });
                resolve(res);
            }).then((res) => {
                const rew = api.getSaleTable({
                    HouseAddress: res.data.data.full_address,
                    HouseName: refAll.current.getFieldValue().newHoursSearch
                })
                return rew
            }).then((res) => {
                props.result(res)
                console.log(props);
                // console.log(res);
            });
        } else {
            new Promise((resolve, reject) => {
                const res = api.cityAddress({
                    province_code: refAll.current.getFieldValue().LeaveCity,
                    city_code: refAll.current.getFieldValue().CityDown,
                });
                resolve(res);
            }).then((res) => {
                const rew = api.getLeaseTable({
                    CourseAddress: res.data.data.full_address,
                    CourseName: refAll.current.getFieldValue().newHoursSearch
                })
                return rew
            }).then((res) => {
                const { value } = searchRef.current.props
                res.data.data = res.data.data.filter(item => {
                    return item.CourseName.includes(value)
                })
                props.result1(res)
                // console.log(props);
                // console.log(res);
            });
        }

    }

    return (
        <div>
            <Form layout="inline" ref={refAll}>
                <Form.Item name="LeaveCity">
                    <Select
                        placeholder="请选择省份"
                        showSearch
                        optionFilterProp="children"
                        onChange={(value) => {
                            selectCity(value);
                        }}
                    >
                        {options.map((item) => {
                            return (
                                <Option key={item.name} value={item.code}>
                                    {item.name}
                                </Option>
                            );
                        })}
                    </Select>
                </Form.Item>
                <Form.Item name="CityDown">
                    <Select
                        placeholder="请选择城市"
                        optionFilterProp="children"
                        onChange={(value) => {
                            selectCounty(value);
                        }}
                    >
                        {cityOption.map((item) => {
                            return (
                                <Option key={item.name} value={item.code}>
                                    {item.name}
                                </Option>
                            );
                        })}
                    </Select>
                </Form.Item>
                <Form.Item name="CityCounty">
                    <Select placeholder="请选择区县">
                        {county.map((item) => {
                            return (
                                <Option key={item.name} value={item.code}>
                                    {item.name}
                                </Option>
                            );
                        })}

                        {/* <Option value="female">耀县</Option>
            <Option value="other">南山区</Option> */}
                    </Select>
                </Form.Item>
                <Form.Item name='newHoursSearch'>
                    <Input placeholder="关键字" ref={searchRef} />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" onClick={() => { searchFun() }}>搜索</Button>
                </Form.Item>
            </Form>
        </div>
    );
};

export default ThreeLevelinkage;